<template>
  <div class="content">
    <!-- search bar -->
    <div class="search_content">
      <div class="search_l">
        <div class="search-city" @click="changeCity">
          <span><img src="../../assets/img/address_icon.png">{{localCity}}</span>
          <i class="iconfont icon arrow-down"></i>
        </div>
      </div>
      <div class="banner_content"></div>
    </div>
    <div class="store">
      <span class="left">{{shopFirstObj.shopName}}</span>
      <span class="right" @click="changeShop"><img src="../../assets/img/change_icon.png" >更换门店</span>
    </div>
    <div class="store_address">
      <p>{{shopFirstObj.shopArea}} {{shopFirstObj.shopAreaName}} {{shopFirstObj.shopAddress}}</p>
      <span class="icon_content" @click=""><img src="../../assets/img/dingwei_icon.png"></span>
    </div>
    <div class="store_tel">
      <p>联系电话：{{shopFirstObj.shopTel}} </p>
      <span class="icon_content">
        <a :href="'tel:'+ shopFirstObj.shopTel"><img src="../../assets/img/tel_icon.png">
        </a>
      </span>
    </div>
    <h4 class="store_server">门店服务详情</h4>
    <div class="sserver_content">
      <img src="../../assets/img/server_picture.png">
    </div>

    <div v-show="isShowShop" class="window_bg" style="z-index: 1000">
      <div class="meal_content">
        <div class="meal_head">
          选择门店
          <span class="close_icon" @click="isShowShop = false"/>
        </div>
        <div class="mealdetail_content">
        <!--  <p class="produce_meal border_bottom">
            <i>定位城市:<em> {{ localCity }}</em></i>
            <a class="changecity" @click="changeCity">更换城市</a>
          </p>-->
          <div v-for="item in shopArr" class="storecity_content">
            <p class="store_cityname">{{ item.shopName }}</p>
              <span><input :value="item" v-model="selectShop" name="shop" type="radio" class="radio-bg"></span></p>
            <p class="store_address">{{ item.shopArea + item.shopAreaName + item.shopAddress }}</p>
          </div>
        </div>
        <div class="bottom_meal">
          <div class="comfirm_btn" @click="goCart">确 定</div>
        </div>
      </div>
    </div>
    <div class="chosemenu_btn" @click="selectCart">选择套餐</div>
    <TarBar index="2"/>
  </div>
</template>

<script>
  import SxShopInfoApi from '@/api/manage/SxShopInfoApi';
  import TarBar from '@/components/TarBar'
  import '@/utils/rem'
  import wx from 'weixin-js-sdk'
  import {getWXSign} from '@/api/wxsdk'

  export default {
    components: {
      TarBar
    },
    data() {
      return {
        listQuery: {
          validFlag: '1',
          shopAreaName: ''
        },
        shopArr: [],//门店数据Arr
        isShowShop: false, //门店选择
        shopFirstObj: {},//门店数据第一条Obj
        localCity:'厦门市', //默认选择城市
        citeArr: [],//城市JSON数据Arr
        shopData: [],//当前城市门店Arr
        selectShop: {},//当前选择门店
      }
    },
    mounted() {
      /*let that = this
      this.openId = localStorage.getItem("openId")
      this.userId = localStorage.getItem("token")
      getInfo(this.userId).then((res) => {
        this.nickName = res.nickName
        this.headImg = res.headImg
      })*/

    },
    created() {

      if(this.$route.query.cityName){
        this.localCity = this.$route.query.cityName;
      }

      this.fetchData();
    },
    methods: {

      selectCart() {
        this.$router.push({ path: '/userCart' });
      },

      changeCity() {
        this.$router.push({ name: 'userCity',  params: { cityName: this.localCity , prefixRouter: this.$route.path}})
      },

      changeShop() {
        this.isShowShop = true;
      },

      goCart() {
        this.isShowShop = false;
        this.shopFirstObj = this.selectShop;
      },

      fetchData() {

        let that = this;
        this.listQuery.shopAreaName = this.localCity;
        this.$http.all([SxShopInfoApi.findList(this.listQuery)])
          .then(this.$http.spread(function (perms) {
            that.shopArr = perms;
            that.shopFirstObj = perms[0];
            console.log(that.shopArr);
          }));

      }
    }
  }
</script>

<style scoped>
  @import "../../assets/css/iconfont.css";
  @import "../../assets/css/login_selfcenter.css";
  @import "../../assets/css/reset.css";
  @import "../../assets/css/order_gift.css";
  @import "../../assets/css/index_appointment.css";
</style>
